<template>
  <div class="editor-root-container">
    <div class="list-wrapper-outer">
      <div class="list-wrapper">
        <div
          class="list-item"
          :class="[selectItem.id == item.id ? 'list-item-active' : '']"
          v-for="(item, index) in taskProfile"
          @click="handleSelect(index)"
        >
          <el-icon><i-ep-clock /></el-icon>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="editor-main-container">
      <div class="editor-main-header">
        <span>
          <el-icon class="header-icon">
            <i-ep-edit />
          </el-icon>
          <span class="header-text">{{ selectItem.name }}</span>
        </span>
        <span>
          <el-button type="primary" link @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </div>
      <WorkingTimeEditor v-model="selectItem" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import WorkingTimeEditor from "./WorkingTimeEditor.vue";
import taskProfile from "@/profiles/tasks.json";

const selectItem = ref({
  id: 999,
  name: "一室 / 四班倒I早 / SUP",
  description: "带班 / 扇区",
  orgId: 1,
  workingTimes: [
    {
      dayOffset: 0,
      from: "07:00",
      to: "08:30",
      priority: 5,
      seatTypePref: ["sup"],
    },
  ],
});

const selectedIndex = ref(0);
const handleSelect = (index) => {
  selectedIndex.value = index;
  selectItem.value = JSON.parse(JSON.stringify(taskProfile[index]));
};

const handleCancel = () => {
  selectItem.value = JSON.parse(
    JSON.stringify(taskProfile[selectedIndex.value])
  );
};

const handleSave = () => {
  taskProfile[selectedIndex.value] = JSON.parse(
    JSON.stringify(selectItem.value)
  );
  const json = JSON.stringify(taskProfile, null, 2);
  console.log(json);
};

onMounted(() => {
  handleSelect(0);
});
</script>

<style scoped>
.editor-root-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: calc(100vh - 96px);
}

.editor-main-container {
  overflow: auto;
  border: 1px solid #8888;
  border-radius: 8px;
  height: 100%;
  position: relative;
  padding-top: 60px;
  padding-bottom: 24px;
  flex: 3;
}

.editor-main-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background-color: #8884;
  border-bottom: 1px solid #8888;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.editor-main-header > * {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.header-text {
  font-size: 14px;
  color: var(--el-text-color-regular);
  border-bottom: 1px solid var(--el-text-color-regular);
  padding: 0 8px;
  margin-bottom: 4px;
}

.header-icon {
  font-size: 24px;
  color: var(--el-text-color-regular);
}

.list-wrapper-outer {
  border: 1px solid #8888;
  border-radius: 8px;
  /* height: auto; */
  width: 320px !important;
  height: 100%;
  overflow: hidden;
  /* padding: 8px 0; */
  flex: 1;
}

.list-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.list-item {
  width: 100%;
  padding: 8px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--el-text-color-regular);
  transition: background-color 0.3s;
}

.list-item:hover:not(.list-item-active) {
  color: var(--el-text-color-primary);
  background-color: #8884;
}

.list-item-active {
  color: var(--el-bg-color);
  background-color: var(--el-color-primary);
}
</style>
